<template>
  <t-dialog v-model:visible="formVisible" :header="formData.property_name + '-' + formData.number_name" :width="680"
    :footer="false" :on-closed="closed">
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :reset-type="resetType" :label-width="100" @submit="onSubmit">
        <t-form-item label="租客姓名" name="name">
          <t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入租客姓名" />
        </t-form-item>
        <t-form-item label="性别" name="sex">
          <t-radio-group v-model="formData.sex" default-value="M">
            <t-radio value="M">男</t-radio>
            <t-radio value="F">女</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="手机号码" name="phone">
          <t-input v-model="formData.phone" :style="{ width: '480px' }" placeholder="请输入手机号码" />
        </t-form-item>
        <t-form-item label="身份证号码" name="id_card_number">
          <t-input v-model="formData.id_card_number" :style="{ width: '480px' }" placeholder="请输入身份证号码" />
        </t-form-item>
        <t-form-item label="籍贯" name="native_place">
          <t-input v-model="formData.native_place" :style="{ width: '480px' }" placeholder="请输入籍贯" />
        </t-form-item>
        <t-form-item label="工作单位" name="work_units">
          <t-input v-model="formData.work_units" :style="{ width: '480px' }" placeholder="请输入工作单位" />
        </t-form-item>
        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
          <t-button theme="primary" type="submit">确定</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
  <t-loading :loading="loading" text="加载中..." fullscreen />
</template>

<script setup lang="ts">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue';
import { ref, watch } from 'vue';

import { saveTenant } from '@/api/house/tenant';

const form = ref(null);

// 父给子传值
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

// 加载
const loading = ref(false);

export interface FormData {
  id: number;
  property_name: string;
  house_property_id: number;
  number_name: string;
  house_number_id: number;
  name: string;
  sex: string;
  phone: string;
  id_card_number: string;
  native_place: string;
  work_units: string;
}
// 初始化数据
const INITIAL_DATA: FormData = {
  id: 0,
  property_name: '',
  house_property_id: 0,
  number_name: '',
  house_number_id: 0,
  name: '',
  sex: '',
  phone: '',
  id_card_number: '',
  native_place: '',
  work_units: ''
};
const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const resetType = 'initial';

// 表单规则
const rules: FormRules<FormData> = {
  name: [{ required: true, message: '租客不能为空', type: 'error' }],
};

// 取消按钮
const onClickCloseBtn = () => {
  formVisible.value = false;
};
// 关闭dialog是reset from
const closed = () => {
  form.value.reset();
  formData.value.id = 0;
};

// 提交按钮
const onSubmit = async ({ firstError }: SubmitContext<FormData>) => {
  if (!firstError) {
    try {
      loading.value = true;
      await saveTenant(formData.value);
      emit("refreshData");
    } catch (e) {
      if (e.response && e.response.data.code === 995) {
        MessagePlugin.error(e.response.data.message);
      } else {
        MessagePlugin.error('系统错误');
      }
    } finally {
      loading.value = false;
      formVisible.value = false;
    }
  } else {
    // console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

// 监视
const emit = defineEmits(['update:visible', 'refreshData']);
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);
watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);
watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);
</script>
